//所有带轮播的图片
const imgs = document.querySelectorAll('#img1')
// 总图片数
const len = imgs.length
//定义变量，保存当前显示图片的索引，即将显示图片的索引
let pIndex = 0, nIndex = 1
// 所有小圆点
const smallDots = document.querySelectorAll('#tab-nav>ul>li') 
// 定时器 id
let timer

//默认第一张显示
imgs[0].style.display = 'block'

// 定义轮播处理的函数
function play() {
	//修改索引
	imgs[pIndex].style.display = 'none'
	pIndex = nIndex
	nIndex += 1
	if(nIndex >= len){ // 最后一个索引后，回到第一个
		nIndex = 0
	}
	// console.log(pIndex)
	imgs[pIndex].style.display = 'block'
	
	// 修改分页器小圆点样式
	for(let i = 0; i < len; i += 1) {
	  smallDots[i].className = ''
	}
	smallDots[pIndex].className = 'active'
}

// 实现自动轮播效果
timer = setInterval(play, 3000)

// 处理事件，鼠标移入/移出轮播图，停止/重启自动轮播
S('#img').addEventListener('mouseenter', function() {
  clearInterval(timer)
  // console.log('移入')
}, false)
S('#img').addEventListener('mouseleave', function() {
  timer = setInterval(play, 3000)
  // console.log('移出')
}, false)

// 翻页效果
S('#prev').addEventListener('click',() => {
	// 设置 nIndex
	nIndex = pIndex - 1
	if(nIndex < 0){
		nIndex = len - 1
	}
	// 轮播
	play()
	// console.log('点击上键')
},false)
S('#next').addEventListener('click',play,false)

// 小圆点事件
for(let i = 0; i < len; i++) {
 smallDots[i].addEventListener('click', function() {
	if (pIndex === i) {
	  return
	}
	nextIndex = i
	play()
  }, false)
}

